import { RightOutlined } from 'esy-ui';
import { memo } from 'react';
import bgPng from '@/assets/images/common/image_gift.png';
import avatarNonePng from '@/assets/images/common/icon_photo_none.png';
import heartPng from '@/assets/images/common/icon_heart.png';
import starPng from '@/assets/images/common/icon_star.png';
import { BgImg, Img } from '@/components';
import { useFormatText, useNavigation } from '@/hooks';
import { UserInfoStateType } from '@/mobx';
import { nameSuffix } from '@/constants';

function Info(props: UserInfoStateType) {
  const { Token, NickName, HeadImg } = props;
  const { text } = useFormatText();
  const navigation = useNavigation();

  const toLogin = () => {
    navigation('/login');
  };

  return (
    <>
      {Token ? (
        <div className='bg-lg-3 px-2.5 py-2 text-xs text-white flex items-center justify-between'>
          <div>
            {NickName}
            {nameSuffix}
          </div>
          <div>0.00 RMB</div>
        </div>
      ) : null}
      <BgImg url={bgPng} className='bg-contain bg-right-top my-3 mx-4'>
        {Token ? (
          <div className='flex items-center'>
            <Img src={HeadImg || avatarNonePng} className='w-14 h-14 rounded-half border-2 border-solid border-white' />
            <div className='flex flex-col justify-center mx-3 text-base text-white font-bold'>
              <div className='flex items-center'>
                {text('text_17')}
                <span className='bg-head text-xs px-3 py-1 rounded-full mx-1.5'>{text('text_18')}</span>
              </div>
              <div className='text-primary'>{text('text_19')}</div>
            </div>
            <div className='absolute right-0 text-xs font-bold'>
              <div className='bg-white rounded-s-full py-1 pl-1 w-20 flex items-center'>
                <Img boxClassName='w-4 h-4 mr-1' src={heartPng} />
                {text('text_20')}
              </div>
              <div className='bg-white rounded-s-full py-1 pl-1 w-20 mt-2 flex items-center'>
                <Img boxClassName='w-4 h-4 mr-1' src={starPng} />
                {text('text_21')}
              </div>
            </div>
          </div>
        ) : (
          <div className='flex items-center text-sm text-white' onClick={toLogin}>
            <Img src={avatarNonePng} className='w-14 h-14 rounded-half border-2 border-solid border-white' />
            <div className='mx-3'>{text('text_12')}</div>
            <RightOutlined className='text-sm' />
          </div>
        )}
      </BgImg>
    </>
  );
}
export default memo(Info);
